<template>
  <div style="padding: 20px">
    <tableHeader />
    <!-- 策略详情模块 -->
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>策略详情</span>
        </div>
      </template>
      <el-row :gutter="0" style="display: flex">
        <el-col :span="24">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="告警策略名称">
              {{ rule.single.name }}</el-descriptions-item
            >
            <el-descriptions-item label="策略类型">
              {{ rule.single.type }}</el-descriptions-item
            >
            <el-descriptions-item label="策略启停">
              {{ rule.tags.flag[rule.single.flag] }}</el-descriptions-item
            >
            <el-descriptions-item label="是否开启远程控制">
              {{
                rule.tags.remoteControl[rule.single.remoteControl]
              }}</el-descriptions-item
            >
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card picBox">
      <template #header>
        <div class="card-header">
          <span>通知配置详情</span>
        </div>
      </template>
      <el-row :gutter="0" style="display: flex">
        <el-col :span="24">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="告警通知配置名称">
              {{ noticeConfig.single.noticeConfigName }}</el-descriptions-item
            >
            <el-descriptions-item label="告警通知周期">
              {{ noticeConfig.single.noticeCycle }}</el-descriptions-item
            >
            <el-descriptions-item label="告警通知时段起始时间">
              {{ noticeConfig.single.noticeStartTime }}</el-descriptions-item
            >
            <el-descriptions-item label="告警通知时段结束时间">
              {{ noticeConfig.single.noticeEndTime }}</el-descriptions-item
            >
            <el-descriptions-item label="通知方式">
              <div v-for="(item, i) in noticeConfig.single.noticeWay" :key="i">
                {{ noticeConfig.tags.noticeWay[item] }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="通知类型">
              {{ noticeConfig.tags.noticeType[noticeConfig.single.noticeType] }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card picBox">
      <template #header>
        <div class="card-header">
          <span>指标项详情</span>
        </div>
      </template>
      <ItemCopy />
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide, onMounted } from "vue";
import tableHeader from "./Info/tableHeader.vue";
import { useRouter, useRoute } from "vue-router";
import { useNavTabs } from "@/store/navTabs";
import { useWorkOrder } from "@/store/backend/WorkOrder/order";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useWarningRule } from "@/store/backend/Warning/rule";
import { DictOperation } from "@/utils/common";
import { useWarningNoticeConfig } from "@/store/backend/Warning/noticeConfig";
import ItemCopy from "./Info/itemCopy.vue";

const router = useRouter();
const route = useRoute();
const navTabs = useNavTabs();
const rule = useWarningRule();
const order = useWorkOrder();
const noticeConfig = useWarningNoticeConfig();
const { proxy } = useCurrentInstance(); //mitt

//初始化字典处理类
const dictOperation = new DictOperation();

interface anyObj {
  [key: string]: any;
}
const state: {
  deviceList: anyObj;
  companyPhone: string;
  employeePhone: string;
  showForm: boolean;
} = reactive({
  deviceList: [],
  companyPhone: "",
  employeePhone: "",
  showForm: false,
});

type DeviceItem = {
  avatar: string;
  equipid: number;
  morestatus: number;
  name: string;
  status: number;
};

//获取字典
const getDictionary = () => {
  //获取策略类型的字典
  dictOperation.getDictionary(rule, "sys_rule_type", "type", "typeType");
  //获取策略启用的字典
  dictOperation.getDictionary(rule, "sys_warningrule_flag", "flag", "typeFlag");
  //获取是否开启远程控制的字典
  dictOperation.getDictionary(
    rule,
    "sys_warningrule_remotecontrol",
    "remoteControl",
    "typeControl"
  );
  //获取告警通知类型的字典
  dictOperation.getDictionary(
    noticeConfig,
    "sys_warningnotice_type",
    "noticeType",
    "type"
  );
  //获取告警通知方式的字典
  dictOperation.getDictionary(
    noticeConfig,
    "sys_warningnotice_way",
    "noticeWay",
    "typeWay"
  );
};
getDictionary();

onMounted(() => {});
provide("rule", rule);
</script>
<style lang="scss" scoped>
.lg-mb-20 {
  margin-bottom: 20px;
}
// 物联网模块
.internet {
}
.box-card {
  margin-bottom: 20px;
}
.imgBox {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.picBox {
}
</style>
